<template>
    <div>
        <el-card class="box-card" style="width: 70%;margin: 0 auto;margin-top:50px">
            <div slot="header" class="clearfix">
                <span>审核流程</span>
            </div>
            <div>
                <el-steps :active="3" finish-status="success" align-center class="steps" v-if="ruleForm.middleState == 0">
                    <el-step title="提交住户信息"></el-step>
                    <el-step title="物业审核"></el-step>
                    <el-step title="认证通过"></el-step>
                </el-steps>
                <el-steps :active="2" finish-status="success" align-center class="steps" v-if="ruleForm.middleState == 2">
                    <el-step title="提交住户信息"></el-step>
                    <el-step title="物业审核"></el-step>
                    <el-step title="审核失败" icon="el-icon-close"></el-step>
                </el-steps>
                <el-steps :active="1" finish-status="success" align-center class="steps" v-if="ruleForm.middleState == 1">
                    <el-step title="提交住户信息"></el-step>
                    <el-step title="物业审核"></el-step>
                    <el-step title="认证通过"></el-step>
                </el-steps>
            </div>
        </el-card>
        <el-card style="width: 70%;margin: 0 auto;margin-top:50px">
            <el-descriptions class="margin-top" title="基础资料" :column="2">
                <!-- <template slot="extra">
                    <el-button type="primary" v-if="$route.params.id == $store.state.id" size="small">操作</el-button>
                </template> -->
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-picture-outline"></i>
                        证件照
                    </template>
                    <!-- {{ ruleForm.userName }} -->
                    <img class="img" :src="ruleForm.fileUrl" alt="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        住户编号
                    </template>
                    {{ ruleForm.userNumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-custom"></i>
                        住户姓名
                    </template>
                    {{ ruleForm.userName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-male"></i>
                        <i class="el-icon-female"></i>
                        住户性别
                    </template>
                    <el-tag size="small">{{ ruleForm.sex }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号码
                    </template>
                    {{ ruleForm.phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-home"></i>
                        住户类型
                    </template>
                    {{ ruleForm.identity }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        证件类型
                    </template>
                    {{ ruleForm.type }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-basketball"></i>
                        证件号码
                    </template>
                    {{ ruleForm.idCard }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-opportunity"></i>
                        备注
                    </template>
                    {{ ruleForm.remark }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-release"></i>
                        住户来源
                    </template>
                    {{ ruleForm.residentSource }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        审核提交日期
                    </template>
                    {{ ruleForm.updateTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        注册日期
                    </template>
                    {{ ruleForm.createTime }}
                </el-descriptions-item>
            </el-descriptions>
            <el-button style="margin-top: 12px;" @click="auditResident(0)" type="primary" v-if="ruleForm.middleState == 1">
                审核通过</el-button>
            <el-button style="margin-top: 12px;" @click="auditResident(2)" type="danger" v-if="ruleForm.middleState == 1">
                审核不通过</el-button>
            <el-button style="margin-top: 12px;" @click="$router.push('/workbench')">返回</el-button>
        </el-card>

    </div>
</template>

<script>
// import { userInfo } from "@/api/user.js";
export default {
    name: "Info",
    data() {
        return {
            active: 0,
            ruleForm: [],
            avatar: String,
            account: String,
            age: Number,
            email: String,
            mobilePhoneNumber: String,
            area: String,
            createDate: Number,
            nickname: String,
            sex: String,
            work: String,
            hobby: String,
            design: String,
        };
    },
    created() {
        this.ruleForm = this.$route.query.paramName
        // this.ruleForm.builtTime = this.timestampToTime(this.ruleForm.builtTime)
        this.ruleForm.createTime = this.timestampToTime(this.ruleForm.createTime)
        this.ruleForm.updateTime = this.timestampToTime(this.ruleForm.updateTime)
        console.log(this.ruleForm)
    },
    mounted() {
        this.load();
    },
    methods: {
        next() {
            if (this.active++ > 2) this.active = 0;
        },
        auditResident(middleState) {
            console.log("**********************************")
            this.$axios
                .get("systemuser/user/auditResident/"+this.ruleForm.userId+"/"+middleState)
                .then(res => {
                    if (res.data.code == 20000) {
                            this.$router.push('/workbench')
                    } else {
                        this.error = res.data.data.error
                        this.$message({
                            type: 'error',
                            message: this.error
                        })
                    }
                });
        },
        timestampToTime(time) {
            // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var date = new Date()
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            let h = date.getHours()
            h = h < 10 ? ('0' + h) : h
            let m = date.getMinutes()
            m = m < 10 ? ('0' + m) : m
            let s = date.getSeconds()
            s = s < 10 ? ('0' + s) : s
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
        },
        load() {
            userInfo(this.$route.params.id)
                .then((res) => {
                    this.avatar = res.data.avatar;
                    this.account = res.data.account;
                    this.age = res.data.age;
                    this.email = res.data.email;
                    this.mobilePhoneNumber = res.data.mobilePhoneNumber;
                    this.area = res.data.area;
                    this.createDate = res.data.createDate;
                    this.nickname = res.data.nickname;
                    this.sex = res.data.sex == 1 ? "男" : "女";
                    this.work = res.data.work;
                    this.design = res.data.design;
                    this.hobby = res.data.hobby;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style scoped>
.img {
    width: 80px;
    height: 80px;
}
</style>